<template>
  <el-dialog
    title="支付确认"
    :modal-append-to-body="false"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="dialogWidth">
    <el-row>
      <!--      <el-card>-->
      <el-col :span="8" style="padding: 10px">
        <div v-proportion="0.65" v-if="product.images" style="height: 160px;">
          <el-image
            style="height: 100%; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"
            :src="product.images"
            fit="cover"></el-image>
        </div>
      </el-col>

      <el-col :span="16" style="padding: 10px">
        <div
          style="height: 80px; background: #FFFFFF; padding: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
          <div style="height: 30px;">
            <el-tag effect="dark" size="mini" v-if="product.chargeType == 1" type="primary">免费</el-tag>
            <el-tag effect="dark" size="mini" v-else-if="product.chargeType == 3" type="danger">限时优惠</el-tag>
            <el-tag effect="dark" size="mini" v-else-if="product.chargeType == 4" type="warning">会员免费</el-tag>
            <span style="font-weight: 400; font-size: 16px; color: #2D2D2D;">{{ product.title }}</span>
          </div>
          <div style="height: 60px">
            <div>
              {{ product.summary }}
            </div>
            <div style="margin-top: 8px; float: right" v-if="product.discountStartTime && product.discountEndTime">
              <TimeCountDown :startTime="product.discountStartTime" :endTime="product.discountEndTime"
                             endText="优惠活动已结束 "/>
            </div>
          </div>
          <div>
            <!-- <span style="font-size: 14px; color: #999999; font-weight: 400;">{{ product.payOrderCount }}人购买</span> -->
            <span style="float: right; margin-right: 10px; font-size: 18px; color: #e20707; font-weight: 500;">
                  <span class="price l blue bold">报名费：</span>
                  <span class="price l blue bold" v-if="!product.price">免费</span>
                  <span class="price l blue bold" v-else-if="product.price == product.discountPrice">
                    <!--如果是会员免费-->
                    <span v-if="product.chargeType == 4 && userTag > 0">
                      <span v-if="product.payType == 1">
                          <span>0 积分</span>
                          <span
                            style="text-decoration: line-through; color: #999999; font-size: 14px;">{{ product.price }} 积分</span>
                      </span>
                      <span v-else>
                          <span>￥0 </span>
                          <span style="text-decoration: line-through; color: #999999; font-size: 14px;">￥{{
                              product.price / 100
                            }}</span>
                      </span>
                    </span>
                    <span v-else>
                      <span v-if="product.payType == 1">
                        {{ product.price }} 积分
                      </span>
                      <span v-else>
                        ￥{{ product.price }}/人
                      </span>
                    </span>
                  </span>
                  <span class="price l blue bold" v-else-if="product.price != product.discountPrice">
                    <span v-if="product.payType == 1">
                        <!--判断是否处于折扣-->
                        <span v-if="product.betweenDiscount">
                          <span>{{ product.discountPrice }} 积分</span>
                          <span
                            style="text-decoration: line-through; color: #999999; font-size: 14px;">{{ product.price }} 积分</span>
                        </span>
                        <span v-else>
                          <span>{{ product.price }} 积分</span>
                        </span>
                    </span>
                    <span v-else>
                        <!--判断是否处于折扣-->
                        <span v-if="product.betweenDiscount">
                          <span>￥{{ product.discountPrice }} </span>
                          <span style="text-decoration: line-through; color: #999999; font-size: 14px;">￥{{product.price / 100}}</span>
                        </span>
                        <span v-else>
                          <span>￥{{ product.price }}/人 </span>
                        </span>
                    </span>
                  </span>
                </span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row> 
      <el-col>
        <div>
          <div>
            <el-form :model="form" :rules="rules" ref="form">
              <strong>请填写基本信息：</strong>
              <el-row>
                  <el-form-item label="姓名" :label-width="labelWidth" style="margin-top: 20px;" prop="applyUserName">
                    <el-input v-model="form.applyUserName" auto-complete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-row>
                  <el-form-item label="性别" :label-width="labelWidth" prop="gender">
                    <el-radio v-for="gender in genderDictList" :key="gender.uid" v-model="form.gender"
                              :label="gender.dictValue" border size="medium">{{ gender.dictLabel }}
                    </el-radio>
                  </el-form-item>
          </el-row>

              <el-row>
                
                  <el-form-item label="年龄" :label-width="labelWidth" prop="age">
                    <el-input-number v-model="form.age" :min="0"></el-input-number>
                  </el-form-item>
                
              </el-row>

              <el-row>	
                <el-form-item label="身份证号" :label-width="labelWidth" prop="idCard">
                    <el-input v-model="form.idCard" auto-complete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-row>  
                  <el-form-item label="我的微信" :label-width="labelWidth" prop="weChat">
                    <el-input v-model="form.weChat" auto-complete="off"></el-input>
                  </el-form-item>

              </el-row>

              <el-row> 
                  <el-form-item label="我的手机" :label-width="labelWidth" prop="phone">
                    <el-input v-model="form.phone" auto-complete="off"></el-input>
                  </el-form-item>

              </el-row>

              <el-row>
                
                  <el-form-item label="报名人数" :label-width="labelWidth" prop="applyUserNum">
                    <el-input-number v-model="form.applyUserNum" :min="1"></el-input-number>
                  </el-form-item>
                
              </el-row>
          
          <el-row>
                
                  <el-form-item label="报名费用" :label-width="labelWidth">
                    {{totalPrice}}
                  </el-form-item>
                
              </el-row>

              <el-row>
                
                  <el-form-item label="备注" :label-width="labelWidth" prop="remark">
                    <el-input v-model="form.remark" auto-complete="off"></el-input>
                  </el-form-item>

              </el-row>

            </el-form>
          </div>
          <div>

            <el-row style=" margin-top: 5px;">
              <el-col :span="12">
                <el-button type="success" style="width: 160px;" @click="goPay()" :disabled="qrcode != null">
                  <span v-if="qrcode">扫码支付</span>
                  <span v-else>下单购买</span>
                </el-button>
              </el-col>
              <!-- <el-col :span="12">
                <span v-if="isLogin && product.payType == 1" style="margin-left: 10px; text-align: center; line-height: 40px;">
                  用户剩余积分:
                  <span style="color: #0E9A00; font-size: 14px;">{{ credits }} 积分</span>
                </span>
              </el-col> -->
            </el-row>


          </div>
        </div>
      </el-col>
      <!--      </el-card>-->
    </el-row>

    <div v-if="qrcode">
      <div class="shang_tit">
        <p>打开
          <span v-if="this.payMethod== 'ALI_PAY' || this.payMethod== 'YUN_GOU_OS_ALI_PAY'">支付宝</span>
          <span v-else-if="this.payMethod== 'WECHAT_PAY' || this.payMethod== 'LANTU_WECHAT_PAY'">微信</span>
          ，扫码完成支付
        </p>
      </div>
      <div class="shang_payimg">
        <Qrcode v-if="qrcode" :text="qrcode" :size="200"/>
      </div>

      <div class="pay_explain">
        如遇支付问题，请联系站长解决
      </div>

      <div class="shang_payselect">
        <div
          v-if="cashPayMethod.aliPay"
          class="pay_item"
          :class="[this.payMethod== 'ALI_PAY'?'checked':'']"
          data-id="alipay"
          @click="submitBuy('ALI_PAY')"
        >
          <span class="radiobox"></span>
          <span class="pay_logo">
            <img src="../../../static/images/alipay.jpg" alt="支付宝">
          </span>
        </div>

        <div
          v-if="cashPayMethod.wxPay"
          class="pay_item"
          :class="[this.payMethod == 'WECHAT_PAY' ?'checked':'']"
          data-id="weipay"
          @click="submitBuy('WECHAT_PAY')"
        >
          <span class="radiobox"></span>
          <span class="pay_logo">
            <img src="../../../static/images/wechat.jpg" alt="微信">
          </span>
        </div>

        <div
          v-if="cashPayMethod.lantuWxPay"
          class="pay_item"
          :class="[this.payMethod == 'LANTU_WECHAT_PAY' ?'checked':'']"
          data-id="weipay"
          @click="submitBuy('LANTU_WECHAT_PAY')"
        >
          <span class="radiobox"></span>
          <span class="pay_logo">
            <img src="../../../static/images/wechat.jpg" alt="微信">
          </span>
        </div>

      </div>
    </div>

  </el-dialog>
</template>

<script>
import {buyNow, checkWhetherPay} from "../../api/pay";
import TimeCountDown from "../TimeCountDown/index.vue";
import Qrcode from 'vue-qrcode-component'
// import {getCurrentUserCredits} from "../../api/about";
import {mapMutations} from "vuex";
import {getListByDictTypeList} from "@/api/sysDictData"

export default {
  name: "PayWindow",
  props: ["product"],
  data() {
    return {
      dialogVisible: true,
      qrcode: null,
      payOrderUid: null, // 支付单号
      payMethod: "LANTU_WECHAT_PAY", // ALI_PAY: 支付宝  WECHAT_PAY：微信
      interval: null, // 支付检查定时器
      userTag: 0,
      // credits: 0,
      isLogin: false,
      dialogWidth: "30%",
      cashPayMethod: {
        aliPay: false,
        wxPay: false,
        yunGouOSAliPay: false,
        lantuWxPay: false,
      },
      form: {
        applyUserName: null,
        gender: null,
        age: 0,
        idCard: null,
        weChat: null,
        phone: null,
        applyUserNum: 1,
        remark: null,
      },
      labelWidth: "80px",
      genderDictList: [], //性别 字典列表
      rules: {
        applyUserName: [
          {required: true, message: '姓名不能为空', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在2到50个字符'},
        ],
        gender: [
          {required: true, message: '性别不能为空', trigger: 'blur'}
        ],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" }
        ],
        weChat: [
          { 
            required: true, message: "本人微信不能为空", trigger: "blur" 
          }
        ],
        phone: [
          {required: false, pattern: /0?(13|14|15|17|18)[0-9]{9}/, message: '请输入正确的手机号码'}
        ],
        
      }
    };
  },
  components: {
    Qrcode,
    TimeCountDown,
  },
  created() {
    this.setCashPayMethodList()
    this.getUserCredits()
    console.log("获取详情", this.product)
    let userInfo = this.$store.state.user.userInfo
    this.isLogin = this.$store.state.user.isLogin;
    if (userInfo) {
      this.userTag = userInfo.userTag
    }
    this.initWidth()
  },
  mounted() {
    this.initWidth()
    this.getDictList()
  },
  computed:{
				//简写只能在只读不写的情况下使用。
				totalPrice(){//表面是个函数，其实只是执行完以后往vm上面放了一个名为fullName的值。
					console.log('get被调用了')
					return this.product.price * this.form.applyUserNum
				}
	},
  methods: {
    ...mapMutations(['setLoginMessage']),
    getUserCredits (refresh) {
      if (refresh) {
        let isLogin = this.$store.state.user.isLogin
        // 判断是否登录
        if (!isLogin) {
          this.isSignIn = false
          // 未登录，自动弹出登录框
          this.setLoginMessage(Math.random())
          return;
        }
      }
      // let params = {}
      // params.refresh = refresh
      // getCurrentUserCredits(params).then(response => {
      //   if(response.code == this.$ECode.SUCCESS) {
      //     this.credits = response.data
      //   }
      // })
    },
    initWidth() {
      const width = document.body.clientWidth;
      if (width < 600) {
        this.dialogWidth = "90%";
      } else if(width < 1200) {
        this.dialogWidth = "60%";
      }  else if(width < 1400) {
        this.dialogWidth = "50%";
      }  else if(width < 1600) {
        this.dialogWidth = "40%";
      } else {
        this.dialogWidth = "30%";
      }
    },
    setCashPayMethodList: function() {
      let webConfigData = this.$store.state.app.webConfigData
      console.log("获取配置信息", webConfigData)
      if(webConfigData && webConfigData.cashPayMethodList) {
        let cashPayMethodList = JSON.parse(webConfigData.cashPayMethodList)
        for(let a=0; a<cashPayMethodList.length; a++) {
          switch (cashPayMethodList[a]) {
            case "1": {
              this.cashPayMethod.aliPay = true
            } break;
            case "2": {
              this.cashPayMethod.wxPay = true
            } break;
            case "3": {
              this.cashPayMethod.yunGouOSAliPay = true
            } break;
            case "4": {
              this.cashPayMethod.lantuWxPay = true
            } break;
            default: {
              console.log("现金支付方式设置有误！！")
            }
          }
        }
      }
      console.log("转化后的信息=", this.cashPayMethod)
    },
    goPay: function () {
      console.log("点击去支付", this.product)
      let productVO = this.product
      if (productVO == null) {
        return
      }
      if (productVO.payType == 1) {
        this.submitBuy('CREDITS_PAY')
      } else{
        if(productVO.payMethod == 12){
          // 蓝兔微信支付
          this.submitBuy('LANTU_WECHAT_PAY')
        }else if(productVO.payMethod == 21){
          // 私下转账
          this.submitBuy('PRIVATE_TRANSFER')
        } else{
          // 蓝兔微信支付
          this.submitBuy('LANTU_WECHAT_PAY')
        }
      }
    },
    submitBuy: function (type) {
      // 需要校验是否登录
      let isLogin = this.$store.state.user.isLogin;
      if (!isLogin) {
        this.$notify.error({
          title: "警告",
          message: "登录后才可以进行支付",
          offset: 100,
        });
        return
      }
      this.payMethod = type
      // 立即购买
      let params = {}
      params.client = "PC"
      params.resourceUid = this.product.resourceUid
      params.resourceOid = this.product.resourceOid
      params.resourceType = this.product.resourceType
      params.payMethod = type
      params.applyUserName = this.form.applyUserName
      params.gender = this.form.gender       
      params.age = this.form.age
      params.idCard = this.form.idCard
      params.weChat = this.form.weChat
      params.phone = this.form.phone
      params.applyUserNum = this.form.applyUserNum
      params.allowPeopleNum = this.product.allowPeopleNum
      params.remark = this.form.remark
      params.price = this.product.price
      // 报名截止时间
      params.applyEndTime = this.product.applyEndTime
      params.endTime = this.product.endTime
      console.log(params.applyEndTime, "params.applyEndTime")
      if(params.applyUserName == null || params.applyUserName == "") {
        this.$commonUtil.message.error("姓名不能为空!")
        return;
      }
      this.$refs.form.validate((valid) => {
        if(!valid) {
          console.log("校验出错")
        } else {
          buyNow(params).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              if (response.data) {
                console.log("type:",type)
                if(type == "PRIVATE_TRANSFER"){
                  this.$message.success("报名成功")
                  this.$emit("payCallback", true)
                  return
                }else{
                    this.qrcode = response.data.url
                    this.payOrderUid = response.data.payOrderUid
                    this.checkPay()
                }
              } else {
                this.$message.success(response.message)
              }
              
            }
          })
        }
      })
      
    },
    // 校验是否购买
    checkPay() {
      let count = 0
      this.interval = setInterval(() => {
        count++
        // 当检查30次将关闭
        if (count > 30) {
          clearInterval(this.interval)
        }
        let params = new URLSearchParams()
        params.append("productUid", this.product.resourceUid)
        if (this.payOrderUid) {
          params.append("orderUid", this.payOrderUid)
        }
        checkWhetherPay(params).then(response => {
          let isPay = response.data
          if (isPay) {
            clearInterval(this.interval)
            this.$message.success("支付完成")
            this.$emit("payCallback", true)
          }
        })
      }, 2000);
    },
    // 关闭时的回调
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$emit("payCallback", false)
          })
          .catch(_ => {});
    },
    /**
     * 字典查询
     */
     getDictList: function () {
      // 判断是否处于编辑模式
      let that = this
      let dictTypeList =  [ 'sys_user_sex']
      getListByDictTypeList(dictTypeList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          let dictMap = response.data;
          console.log(dictMap.sys_user_sex.list)
          this.genderDictList = dictMap.sys_user_sex.list
          
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
